<script setup>
const back = () => {
    uni.switchTab({ url: '/pages/my/my' })
    console.log(1);
}

const interaction = () => {
    console.log(1);
    uni.navigateTo({
        url: '/subpkg/interaction/interaction',
    })
}

const system = () => {
    console.log(1);
    uni.navigateTo({
        url: '/subpkg/system/system',
    })
}
</script>

<template>
    <div class="header_a">
        <view class="box-bg">
            <view class="nav">
               <uni-icons class="icon" @click="back()" color="#fff" ; type="back" size="30"></uni-icons>
               <!-- <text @click="back()" class="icon">←</text> -->
                <text class="box-bg">
                消息</text>
            </view>
            <view class="main">
            <view class="main_a" @click="interaction">
                <view class="hu">
                   互动消息
                </view>
                <view class="you">
                    >
                </view>
            </view>
            <view class="main_b" @click="system">
                <view class="xi">
                    系统消息
                </view>
                <view class="youzi">
                    >
                </view>
            </view>
        </view>
        </view>
       
    </div>
</template>

<style lang="scss">
.header_a {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    .nav {
        width: 100vw;
        height: 100px;
        background: linear-gradient(to right, #3e85ef, rgb(46, 175, 255));
        display: flex;
    }

    .box-bg {
        display: inline-block;
        width: 100vw;
        height: 100%;
        line-height: 100px;
        color: #fff;
        text-align: center;
    }
    .icon {
        position: relative;
        top: 2px;
        left: 30px;

    }
    .main {
    width: 100%;
    height: 200px;
    .main_a {
        width: 100%;
        height: 70px;
        border-bottom: 1px solid #ccc;
        color: #000;

        .hu {
            float: left;
            font-size: 15px;
            line-height: 70px;
            margin-left: 30px;
        }

        .you {
            float: right;
            font-size: 15px;
            margin-right: 20px;
            line-height: 70px;
        }
    }

    .main_b {
        width: 100%;
        height: 70px;
        margin-top: 6px;
       border-bottom: 1px solid #ccc;
        .xi {
            float: left;
            font-size: 15px;
            line-height: 70px;
            margin-left: 30px;
            color: #000;
        }

        .youzi {
            float: right;
            font-size: 15px;
            margin-right: 20px;
            line-height: 70px;
            color: #000;
        }
    }

}
}

</style>